<template>
  <el-form ref="cateAdd" :model="cate" label-width="120px" :rules="rules">
    <el-form-item label="分类名" prop="cateName">
      <el-input v-model="cate.cateName" />
    </el-form-item>
    <el-form-item label="排序" prop="order">
      <el-input-number :min="1" v-model="cate.order" />
    </el-form-item>
    <el-form-item label="是否显示" prop="enable">
      <el-switch
        v-model="cate.enable"
        inline-prompt
        active-text="显示"
        inactive-text="隐藏"
      />
    </el-form-item>
    <el-form-item label="父级分类" prop="pid">
      <el-cascader
        v-model="cate.pid"
        :options="_cates"
        :props="{
          checkStrictly: true,
          label: 'cateName',
          value: 'id',
          emitPath: false,
        }"
        clearable
      />
    </el-form-item>

    <el-form-item label="分类图标">
      <el-upload
        v-model:file-list="fileList"
        action="/api/upload"
        name="file"
        accept=".jpg,.png,.gif"
        list-type="picture-card"
        :before-upload="beforeUpload"
        :on-success="uploadSuccess"
      >
        <el-button type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateCate, getCateDetail } from "@/api/cate";

export default {
  props: {
    cates: {
      type: Array,
      required: true,
    },
    cateId: {
      type: Number,
      required: true,
    },
  },
  watch: {
    cateId: {
      handler(val) {
        // 监听 cateId 变化 请求 要修改商品分类详情 赋值给表单
        this.fetchCateDetail();
      },
      immediate: true,
    },
  },
  data() {
    return {
      rules: {
        cateName: [
          {
            required: true,
            message: "该字段必填",
          },
        ],
      },
      cate: {
        cateName: "", // 分类名
        cateIcon: "", // 分类图标 地址
        order: 1, // 排序 值越大越靠前
        enable: true, // 是否显示 分类
        pid: -1, // -1顶层分类
      },
      fileList: [],
    };
  },
  methods: {
    // 获取要修改的分类的详情
    fetchCateDetail() {
      getCateDetail(this.cateId).then((res) => {
        if (res.data.code === 200) {
          this.cate = res.data.data;
          if (this.cate.cateIcon) {
            this.fileList = [
              {
                name: "file",
                url: this.cate.cateIcon,
              },
            ];
          }
        }
      });
    },
    beforeUpload(file) {
      // 1m
      if (file.size > 1024 * 1024) {
        this.$message({
          type: "error",
          message: "请选择小于1m图片",
        });
        return false;
      } else {
        return true;
      }
    },
    uploadSuccess(res) {
      if (res.code === 200) {
        this.cate.cateIcon = res.data.url;
        this.$message({
          type: "success",
          message: "上传成功",
        });
      }
    },
    onSubmit() {
      this.$refs.cateAdd
        .validate()
        .then(() => {
          updateCate(this.cate).then((res) => {
            // 成功后 弹出 是否成功提示 刷新页面
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: res.data.msg,
                duration: 1500,
                onClose: () => {
                  // 刷新页
                  this.$router.go(0);
                },
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "表单校验不通过",
          });
        });
    },
  },
  computed: {
    _cates() {
      return [
        {
          cateName: "顶层分类",
          id: -1,
        },
        ...this.cates,
      ];
    },
  },
};
</script>

<style lang="scss" scoped></style>
